{% extends 'tend/common/base.html' %}
{% import "tend/macros/_patination.html" as page_macros %}
{% import "tend/macros/_flash.html" as flash_macros %}
{% block title %}{{ article.title }}-{{article.category.title}}-何三笔记{% endblock %}
{% block keywords %} {{article.title}}-何三笔记 {% endblock %}
{% block description %} {{article.summary|truncate(80,killwords=True,leeway=0) }} {% endblock %}
{% block meta %}
<meta property="og:type" content="article" />
<meta property="og:title" content="{{article.title}}" />
<meta property="og:url" content="{{url_for('.article',name=article.name)}}" />
<meta property="og:image" content="{{article.thumbnail}}" />
<meta property="og:image:secure_url" content="{{article.thumbnail}}" />
<meta property="og:image:width" content="250" />
<meta property="og:image:height" content="150" />
<meta property="article:published_time" content="{{article.publish_time.strftime(" %Y-%m-%dT%H:%M+00:00")}}" />
<meta property="article:modified_time" content="{{article.publish_time.strftime(" %Y-%m-%dT%H:%M+00:00")}}" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="{{article.title}}" />
<meta name="twitter:image" content="{{article.thumbnail}}" />
{% endblock %}
{% block css %}
{{ super() }}
<link href="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.css" rel="stylesheet">
<link href="{{ url_for('main.static', filename='css/detail.css') }}" rel="stylesheet">
<link href="{{ url_for('main.static', filename='css/monokai.css') }}" rel="stylesheet">
<link href="{{ url_for('main.static', filename='css/base_comment.css') }}" rel="stylesheet">
<style>
    footer {
        display: none;
    }

    .subject-col-7 {
        margin-bottom: 1.2rem;
    }
</style>
{% endblock %}
{% block stop_headroom %}true{% endblock %}
{% block js %}
{{ super() }}
<script src="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.js"></script>
<script src="{{url_for('main.static',filename='js/comment/activate-power.js')}}"></script>
<!-- <script src="{{url_for('main.static',filename='js/comment/editor.js')}}"></script> -->
<script src="{{url_for('main.static',filename='js/code.js')}}"></script>
<script src="{{url_for('admin.static',filename='ajax/libs/toastr/toastr.min.js')}}"></script>
<script src="{{url_for('main.static',filename='js/qrcode.js')}}"></script>
<script src="{{url_for('main.static',filename='js/pay.js')}}"></script>
<script>
    const links = document.querySelectorAll('#article a');
    links.forEach(link => {
        link.setAttribute('target', '_blank');
    });
    document.addEventListener('DOMContentLoaded', function () {
        const firstLi = document.querySelector('div.article-toc div.toc > ul > li > a:first-child');
        if (firstLi) {
            firstLi.classList.add('active');
        }
    });
    $(".collapsible").click(function () {
        $(this).toggleClass("collapsed");
        const parentElement = $(this).parent();
        parentElement.children("ul").toggleClass("collapse");
    });
</script>
{% endblock %}
{% block main %}

<!--主要内容块-->

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-2 d-none d-lg-block subject-col-2 subject-block">
            <div class="subject-list f-14 rounded-6">
                <div class="toc-title f-15"><strong>{{article.category.title}}</strong></div>
                <div class="subject-article-list">
                    <ul>
                        {% set top_category = article.category.top_category() %}
                        {% for c in top_category.children %}
                        <li>
                            <div
                                class="subject-subcategory collapsible {{'active-subject' if article.category.id == c.id else 'collapsed'}}">
                                <div class="subcategory-title">{{c.title}}</div>
                                <div class="caret">
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"
                                        viewBox="0 0 24 24" class="caret-icon">
                                        <path
                                            d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z">
                                        </path>
                                    </svg>
                                </div>
                            </div>
                            <ul class="{{'' if article.category.id == c.id else 'collapse'}}">
                                {% for a in c.articles() %}
                                <li>
                                    <a class="{{'active' if request.path == url_for('main.article',name=a.name) else ''}}"
                                        href="{{url_for('main.article',name=a.name)}}">{{a.title}}</a>
                                </li>
                                {% endfor %}
                            </ul>
                        </li>
                        {% endfor %}

                        <li>
                            <div
                                class="subject-subcategory collapsible {{'active-subject' if article.category.id == top_category.id else 'collapsed'}}">
                                <div class="subcategory-title">其他</div>
                                <div class="caret">
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"
                                        viewBox="0 0 24 24" class="caret-icon">
                                        <path
                                            d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z">
                                        </path>
                                    </svg>
                                </div>
                            </div>
                            <ul class="{{'' if article.category.id == top_category.id else 'collapse'}}">
                                {% for a in top_category.articles() %}
                                <li>
                                    <a class="{{'active' if request.path == url_for('main.article',name=a.name) else ''}}"
                                        href="{{url_for('main.article',name=a.name)}}">{{a.title}}</a>
                                </li>
                                {% endfor %}
                            </ul>
                        </li>


                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-7 subject-col-7">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-white border-0 rounded-6 mb-2 py-2 f-15">
                    <li class="breadcrumb-item">
                        <i class="fa fa-home mr-1"></i><a href="/">首页</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{url_for('.category', c=top_category.name)}}">{{top_category.title}}</a>
                    </li>
                    <li class="breadcrumb-item active d-none d-md-block" aria-current="page">{{article.title}}</li>
                    <li class="breadcrumb-item active d-md-none" aria-current="page">当前文章</li>
                </ol>
            </nav>
            <div class="card rounded-6 border-0" id="article">
                <div class="card-body px-2 px-md-3 pb-0">
                    <h1 class="card-title text-center font-weight-bold text-info">{{article.title}}</h1>
                    <hr>
                    <div class="text-center f-13">
                        <span class="mx-2" data-toggle="tooltip" data-placement="bottom"
                            title="最后编辑于{{article.publish_time.strftime('%Y年%m月%d日')}}">发表于
                            {{article.publish_time.strftime('%Y年%m月%d日')}}</span>
                        <span class="mx-2">阅读 {{article.vc}}</span>
                        <span class="mx-2">评论 0</span>
                    </div>
                    <div class="article-body mt-4 f-17" style="line-height:1.8">
                        {{article.content_html|hidden_content|safe}}
                    </div>
                    <div class="">
                        {{article.show_h_content | safe}}
                    </div>
                    <blockquote class="p-1 f-14 mt-3" style="border-left: 4px solid #dc3545;">
                        <p class="m-1"><strong>版权声明：</strong>如无特殊说明，文章均为<a
                                href="{{url_for('main.index')}}">何三笔记</a>原创，转载请注明出处
                        </p>
                        <p class="m-1"><strong>本文链接：</strong><a href="{{request.url}}">{{request.url}}</a></p>
                    </blockquote>
                    <div class="tag-cloud my-4">
                        {% for tag in article.tags %}
                        <a class="tags f-16" href="{{url_for('main.tag',t=tag.code)}}">{{tag.name}}</a>
                        {% endfor %}
                    </div>

                    <div class="text-center">
                        <button class="btn btn-danger rounded-0" data-toggle="collapse" data-target=".multi-collapse"
                            aria-expanded="false" aria-controls="sponsor-zfb sponsor-wx"
                            style="line-height: 1;font-size: .8rem;">
                            <i class="fa fa-cny"></i>
                            如果文章对你有所帮助，可以赞助本站
                            <i class="fa fa-chevron-down"></i>
                        </button>
                    </div>
                    <div class="row p-3">
                        <div class="col text-center">
                            <div class="collapse multi-collapse" id="sponsor-wx">
                                <div class="p-1 text-success">微信</div>
                                <img class="w-75" src="http://cdn.h3blog.com/wechat-qr-code.png" alt="微信赞助码">
                            </div>
                        </div>
                        <div class="col text-center">
                            <div class="collapse multi-collapse" id="sponsor-zfb">
                                <div class="p-1 text-primary">支付宝</div>
                                <img class="w-75" src="http://cdn.h3blog.com/alipay-qr-code.png" alt="支付宝赞助码">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="card mt-2 rounded-6 border-0" id="comment-block">

                <div class="card border-0 f-16" id="editor-block">

                    <div class="card-body text-center m-2 m-md-3 f-16" id="no-editor">
                        <div>您尚未登录，请
                            <a class="text-danger" href="/accounts/login/?next=/subject/article/Jenkins-install/">登录</a>
                            或
                            <a class="text-danger"
                                href="/accounts/signup/?next=/subject/article/Jenkins-install/">注册</a> 后评论
                        </div>
                        <div class="login-link mt-2">
                            <a class="mx-3" href="/accounts/weibo/login/?next=/subject/article/Jenkins-install/"
                                title="社交账号登录有点慢，请耐心等候！"><i class="fa fa-weibo fa-2x"></i></a>
                            <a class="mx-3" href="/accounts/github/login/?next=/subject/article/Jenkins-install/"
                                title="社交账号登录有点慢，请耐心等候！"><i class="fa fa-github fa-2x"></i></a>
                        </div>
                    </div>

                </div>
                <div class="card-body p-2 p-md-3 f-17" id="comment-list">
                    <ul class="list-unstyled">
                        <div class="mb-3">
                            <strong>0&nbsp;人参与&nbsp;|&nbsp;0&nbsp;条评论</strong>
                        </div>

                        暂时没有评论，欢迎来尬聊！

                    </ul>
                </div>
            </div> -->
        </div>
        <div class="col-lg-2 d-none d-lg-block subject-col-2 toc-block">
            <div class="article-toc f-14 rounded-6">
                <div class="toc-title f-15"><strong>目录</strong></div>
                {{ (article.toc or '') |safe }}
            </div>
        </div>
    </div>
</div>
<!--图片预览-->
<div class="modal fade" id="img-to-big" tabindex="-1" role="dialog" aria-labelledby="img-to-bigTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 90%">
        <img class="rounded mx-auto d-block" alt="image" style="max-width: 100%">
    </div>
</div>

<!--支付-->

<div id="modal-pay" class="modal fade" tabindex="-1" aria-labelledby="exampleModalCenterTitle" style="display: none;"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">请使用支付宝支付</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="pay-div" class="row justify-content-md-center m-5">
                    <div class="card">
                        <div id="qrcode" class="m-1"></div>
                        <div class="card-body">
                            <p style="font-size: larger;font-weight: 700;">
                                <svg t="1700484615558" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4032" width="32" height="32">
                                    <path
                                        d="M860.16 0C950.272 0 1024 73.889684 1024 164.163368v531.509895s-32.768-4.122947-180.224-53.355789c-40.96-14.362947-96.256-34.896842-157.696-57.478737 36.864-63.595789 65.536-137.485474 86.016-215.444211h-202.752v-71.841684h247.808V256.512h-247.808V135.437474h-100.352c-18.432 0-18.432 18.458947-18.432 18.458947v104.663579H200.704v41.040842h249.856v69.793684H243.712v41.013895H645.12c-14.336 51.307789-34.816 98.519579-57.344 141.608421-129.024-43.115789-268.288-77.985684-356.352-55.403789-55.296 14.362947-92.16 38.992842-112.64 63.595789-96.256 116.978526-26.624 295.504842 176.128 295.504842 120.832 0 237.568-67.718737 327.68-178.526316C757.76 742.858105 1024 853.692632 1024 853.692632v6.144C1024 950.110316 950.272 1024 860.16 1024H163.84C73.728 1024 0 950.137263 0 859.836632V164.163368C0 73.889684 73.728 0 163.84 0h696.32zM268.126316 553.121684c93.049263-10.374737 180.062316 26.974316 283.270737 78.874948-74.886737 95.501474-165.941895 155.701895-256.970106 155.701894-157.830737 0-204.368842-126.652632-125.466947-197.200842 26.300632-22.851368 72.838737-35.301053 99.166316-37.376z"
                                        fill="#00A0EA" p-id="4033"></path>
                                </svg>
                                请使用支付宝扫一扫
                            </p>
                            <p id="countdown-container"></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div> -->
        </div>
    </div>
</div>

{% endblock %}